<script setup lang="ts"></script>

<template>
  <div class="note">
    <div class="note-top">
<!--      <a class="note-add-btn">-->
<!--        <el-icon>-->
<!--          <Plus/>-->
<!--        </el-icon>-->
<!--        提交句子</a>-->
    </div>
    <div class="note-container">
      人生不如意何止八九，可与人言者何至二三。
    </div>
    <div class="note-bottom"></div>
  </div>
</template>

<style scoped>
.aside .note-top {
  padding-top: 38px !important;
  position: relative;
  background: url('/images/note/bg-note-top.png') top center no-repeat;
  background-size: 100% 100%;
}

.aside .note .note-add-btn {
  position: absolute;
  right: 16px;
  top: 16px;
  color: #f39c12;
  font-size: 12px;
  text-decoration: none;
}

.aside .note-container {
  padding: 1px 20px 0;
  text-indent: 2em;
  background: url('/images/note/bg-note-middle.png') top center repeat-y;
  overflow: hidden;
  background-size: 100% auto;
}

.aside .note-bottom {
  padding-bottom: 34px;
  background: url('/images/note/bg-note-bottom.png') bottom center no-repeat;
  background-size: 100% 100%;
}
</style>